<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        原始文本:<input type="text" id="origin"><br>
        <input type="button" value="转小写" id="tolower">
        <input type="button" value="转大写" id="toupper"><br>
        结果文本:<input type="text" id="result">
    </div>
    <script>
        var originObj=document.getElementById("origin");
        var lowerObj=document.getElementById("tolower");
        var upperObj=document.getElementById("toupper");
        var resultObj=document.getElementById("result");
        //转小写
        lowerObj.onclick=function(){
            if(originObj.value){
                resultObj.value=originObj.value.toLowerCase();
            }
        }
        //转大写
        upperObj.onclick=function(){
            if(originObj.value){
                resultObj.value=originObj.value.toUpperCase();
            }
        }
    </script>
</body>
</html>